<!--
 * @description 标签组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-tag"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<!-- 图标 -->
		<view
			class="pure-tag__icon"
			v-if="iconName || $slots.icon"
		>
			<slot name="icon">
				<pure-icon
					:name="iconName"
					v-bind="iconOpts"
				></pure-icon>
			</slot>
		</view>

		<!-- 文本 -->
		<view
			class="pure-tag__text"
			v-if="text || $slots.default"
		>
			<slot>{{ text }}</slot>
		</view>

		<!-- 关闭图标 -->
		<view
			class="pure-tag__close"
			v-if="closeable"
			@tap.stop="_handleClose"
		>
			<slot name="close">
				<pure-icon
					:name="closeIconName"
					v-bind="closeIconOpts"
				></pure-icon>
			</slot>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick", "onClose"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`pure-tag--theme pure-tag--theme--${_props.theme}`);

		// 幽灵
		if (_props.ghost) array.push("pure-tag--ghost");

		// 镂空
		if (_props.plain) array.push("pure-tag--plain");

		// 圆角标签
		if (_props.round) array.push("pure-tag--round");

		// 矩形
		if (_props.square) array.push("pure-tag--square");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-tag-theme: ${getThemeValue(_props.theme)}`);

		// 圆角大小
		if (_props.radius) array.push(`--pure-tag-radius: ${_props.radius}`);

		return array;
	});

	// 点击
	function _handleClick() {
		_emits("onClick");
	}

	// 关闭
	function _handleClose() {
		_emits("onClose");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
